<template>
	<view>
		<view>
			<h2>欢迎登录</h2>
		</view>

		<view class="example">
			<!-- 自定义表单校验 -->
			<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
				<uni-forms-item name="name">
					<uni-easyinput v-model="customFormData.name" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="age">
					<uni-easyinput v-model="customFormData.age" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('customForm')">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customFormData: {
					name: '',
					age: '',

				},
				// 自定义表单校验规则
				customRules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '用户名不能为空'
							},
							{
								pattern: '/^1[3-9]\d{6,12}$/',
								errorMessage: '密码不正确',
							}
						]
					},
					age: {
						rules: [{
								required: true,
								errorMessage: '密码不能为空',

							},
							{
								pattern: '/\d{6,9}$/',
								errorMessage: '密码不正确',
							}
						]
					},
				},
			};
		},

		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		},
		created() {
			uni.request({
				url: 'http://10.161.22.13:3030/travel/login'
			})
		}
	}
</script>

<style lang="less">

</style>